<template>
  <div style="height:100%;background-color: rgb(245,245,245)">

    <div class="app-box">
      <headerCom></headerCom>
      <div class="main">
        <!--搜索盒子-->
        <div class="search-box" style="margin-bottom: 20px">
          <div style="margin-top: 15px;">
            <el-input placeholder="请输入内容" v-model="queryParams.companName" @keyup.enter.native="handleQuery"
                      class="input-with-select">
              <el-button slot="append" type="primary" class="btn-color" style="padding: 0 20px;" @click="handleQuery">
                搜索企业
              </el-button>
            </el-input>
          </div>
        </div>
        <div class="show-box" style="display: flex;justify-content: right">
          <right-toolbar :showSearch.sync="showSearch" @queryTable="reSetsearch"></right-toolbar>
        </div>
        <div class="tiaojian-box" v-show="showSearch">
          <div class="mb-4">
            <span style="padding-right: 10px">热门城市</span>
            <el-radio-group v-model="cieySecrch">
              <el-radio @change="cahngeCity(item)" v-for="item in proList" :label="item.id" size="large" :key="item.id">
                {{ item.regionName }}
              </el-radio>
            </el-radio-group>
          </div>
          <div class='mb-ml-4 seach-tiaojain'>
            <span class="arr-box" style="padding-right: 10px">地&nbsp;&nbsp;&nbsp;&nbsp;区</span>
            <el-select style="margin-right: 10px" v-model="myprovince" placeholder="请选择省"
                       @change="handleChangesheng">
              <el-option
                  id="pro"
                  clearable
                  v-for="item in myArea"
                  :key="item.value"
                  :label="item.label"
                  :value="item">
              </el-option>
            </el-select>
            <el-select v-model="mycity" placeholder="请选择市" @change="handleChangeshi">
              <el-option
                  clearable
                  v-for="item in mycityQuery"
                  :key="item.value"
                  :label="item.label"
                  :value="item">
              </el-option>
            </el-select>
          </div>
          <div class="mb-2 ml-4 seach-tiaojain">
            <span style="padding-right: 10px">单休双休</span>
            <el-radio-group v-model="queryParams.weekendsClosed" @change="getList">
              <el-radio :label="-1" size="large">全部</el-radio>
              <el-radio :label="0" size="large">双休</el-radio>
              <el-radio :label="1" size="large">单休</el-radio>
              <el-radio :label="2" size="large">大小周</el-radio>
              <el-radio :label="3">一天半</el-radio>
            </el-radio-group>
          </div>

          <div class="mb-2 ml-4 seach-tiaojain">
            <span style="padding-right: 10px">加班情况</span>
            <el-radio-group v-model="queryParams.overtimesSituation" @change="getList">
              <el-radio :label="-1" size="large">全部</el-radio>
              <el-radio :label="0" size="large">根据项目加班</el-radio>
              <el-radio :label="1" size="large">经常强制加班</el-radio>
              <el-radio :label="3">不加班</el-radio>
            </el-radio-group>
          </div>

          <div class="mb-2 ml-4 seach-tiaojain">
            <span style="padding-right: 10px">社保情况</span>
            <el-radio-group v-model="queryParams.socialSecurity" @change="getList">
              <el-radio :label="-1" size="large">全部</el-radio>
              <el-radio :label="0" size="large">按时上</el-radio>
              <el-radio :label="1" size="large">不按时上</el-radio>
            </el-radio-group>
          </div>
        </div>


        <!--存放公司数据-->
        <div class="list-main" v-loading="loginState">
          <div class="list-conntn">
            <div class="table-item" v-for="(item) in tableData" :key="item.id">
              <div class="item-left">
                <div class="item-header" style="display: flex;justify-content: space-between">
                  <div style="display: flex">
                    <div class="item-name" style="cursor: pointer" @click="handleUpdate(item.id)">{{
                        item.companName
                      }}
                    </div>
                    <div class="item-ra">{{ item.companyRating }}分</div>
                    <div style="margin-left: 10px">{{ item.province }} {{ item.city }}</div>
                  </div>

                  <div class="item-right">
                    <div class="item-more" style="color: blue;cursor: pointer" @click="handleUpdate(item.id)">更多>
                    </div>
                  </div>
                </div>
                <div class="item-body">
                  <div class="item-tag">
                    <el-tag class="tag-margin" size="small" v-if="item.wage==2" type="danger">欠薪</el-tag>
                    <el-tag class="tag-margin" size="small" v-if="item.wage==1" type="warning">拖延发放</el-tag>
                    <el-tag class="tag-margin" size="small" v-if="item.wage==0" type="success">按时发放</el-tag>
                    <el-tag class="tag-margin" size="small" v-if="item.overtimesSituation==3" type="success">不加班
                    </el-tag>
                    <el-tag class="tag-margin" size="small" v-if="item.overtimesSituation==1" type="warning">经常强制加班
                    </el-tag>
                    <el-tag class="tag-margin" size="small" v-if="item.overtimesSituation==0" type="danger">
                      根据项目加班
                    </el-tag>
                    <el-tag class="tag-margin" size="small" v-if="item.reserveFund==1" type="danger">无公积金</el-tag>
                    <el-tag class="tag-margin" size="small" v-if="item.reserveFund==0" type="success">有公积金</el-tag>
                    <el-tag class="tag-margin" size="small" v-if="item.socialSecurity==1" type="danger">不按时上社保
                    </el-tag>
                    <el-tag class="tag-margin" size="small" v-if="item.socialSecurity==0" type="success">按时上社保
                    </el-tag>
                    <el-tag class="tag-margin" size="small" v-if="item.weekendsClosed==3">一天半</el-tag>
                    <el-tag class="tag-margin" size="small" v-if="item.weekendsClosed==2" type="warning">大小周</el-tag>
                    <el-tag class="tag-margin" size="small" v-if="item.weekendsClosed==1" type="danger">单休</el-tag>
                    <el-tag class="tag-margin" size="small" v-if="item.weekendsClosed==0" type="success">双休</el-tag>
                  </div>
                </div>
                <div class="item-conent">
                  <div v-if="item.moonReviewsList.length==0">暂无评论</div>
                  <div v-else style="display: flex;justify-content: space-between;">
                    <div style="max-width: 800px"> {{ item.moonReviewsList[0].detailedDescription }}</div>
                    <div class="item-createtime" style="width: 200px;color: #999999;font-size: 14px">
                      {{ item.moonReviewsList[0].createTime }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="pageBox" v-if="total>0">
          <pagination
              layout="prev, pager, next"
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import headerCom from "@/components/headerCom/index.vue";
import {address, getCompanyList, getPopular} from "@/api";
import Pagination from "@/components/Pagination/index.vue";
import RightToolbar from "@/components/RightToolbar/index.vue";

export default {
  name: "indexPage",
  components: {
    RightToolbar,
    Pagination,
    headerCom
  },
  data() {
    return {
      loginState: true,
      cieySecrch: '',
      showSearch: true,
      myArea: [],
      mycityQuery: [],
      myprovince: '',
      mycity: '',
      provinceId: '',
      cityId: '',
      province: '',
      city: '',
      // 城市
      enterpriseAddress: '',
      avatarUrl: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        companName: '',
        weekendsClosed: -1,
        overtimesSituation: -1,
        socialSecurity: -1,
        provinceId: '',
        cityId: ''
      },
      comanyName: '',
      tableData: [],
      proList: [],
      secrchparams: {
        pageNum: 1,
        pageSize: 10,
        companName: '',
      }
    }
  },
  created() {
    this.getList();
    this.getArr()
    this.gerProList()
  },
  mounted() {
  },
  watch: {
    myprovince: function (newValue) {
      this.mycityQuery = [],
          this.myareaQuery = [],
          this.myArea.forEach((item) => {
            if (newValue.value === item.value) {
              this.mycityQuery = item.children
            }
          })
    },
  },
  methods: {
    // 判断城市级别
    cahngeCity(item) {
      if (item.regionLevel == 1) {
        this.queryParams.cityId = ''
        console.log('省')
        this.queryParams.provinceId = item.id
      } else {
        this.queryParams.provinceId = ''
        this.queryParams.cityId = item.id
      }
      this.getList()
    },

    gerProList() {
      getPopular().then(res => {
        console.log(res, 'hor')
        this.proList = res.data
        console.log(this.proList, 'prolist')
      })
    },
    reSetsearch() {
      this.myprovince = ''
      this.mycity = ''
      this.cieySecrch = ''
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        companName: '',
        weekendsClosed: -1,
        overtimesSituation: -1,
        socialSecurity: -1,
        provinceId: '',
        cityId: ''
      }
      console.log(document.getElementById('pro'))
      this.getList()
    },
    // 获取省市接口
    getArr() {
      address().then(res => {
        this.myArea = res.data
      })
    },
    // element
    //省
    handleChangesheng(value) {
      this.provinceId = value.value
      this.sheng = value.label
      this.queryParams.provinceId = this.provinceId
      this.mycity = null
      this.getList()
    },
    handleChangeshi(value) {
      this.provinceId = ''
      this.shi = value.label
      this.cityId = value.value
      this.queryParams.cityId = this.cityId
      this.getList()
    },
    // 获取公司列表
    getList() {
      getCompanyList(this.queryParams).then(res => {
        if (res.code == 200) {
          this.loginState = false
          this.tableData = res.rows
          this.total = res.total
        }

      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 分页
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList(this.queryParams)
    },
    getCom() {
      this.secrchparams.companName = this.comanyName
      getCompanyList(this.secrchparams).then(res => {
        if (res.code == 200) {
          this.tableData = res.rows
          this.total = res.total
        }
      })
    },
    handleUpdate(row) {
      let routerUrl = this.$router.resolve({
        path: "/detail",
        query: {
          id: row
        }
      })
      window.open(routerUrl.href, '_blank')
    },
  }
}
</script>
<style scoped>


.table-item {
  border-bottom: 1px solid antiquewhite;
  background-color: white;
  display: flex;
  padding-bottom: 10px;
  transition: all .2s linear;

  .item-left {
    padding-left: 50px;
    width: 90%;

    .item-header {
      padding: 10px 0;
      color: blue;
      display: flex;

      .item-name {
        margin-right: 10px;
      }
    }

    .item-body {
      display: flex;
      justify-content: space-between;
      padding-bottom: 10px;
    }
  }

}

.item-right {
  display: flex;
  align-items: flex-end;
}

.app-box {
  background: linear-gradient(180deg, cornflowerblue 0, 20%, #fff 100%);

}

.pageBox {
  background-color: white;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  padding: 10px 0;
}

.main {
  width: 1250px;
  margin: 0 auto;
  height: 100%;
}

.el-table__footer-wrapper, .el-table__header-wrapper {
  display: none;
}

.divi-der {
  margin: 0 !important;
}

.title-box {
  text-align: center;
  color: white;
  font-size: 26px;
  font-weight: 700;
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.search-box {
  margin: 0 auto;
  width: 900px;
}

::v-deep .el-input-group__append {
  background-color: rgb(64, 158, 255) !important;
  color: white !important;
  border: none;
}

.tag-margin {
  margin-right: 20px;
}

.item-ra {
  font-size: 18px;
}

.tiaojian-box {
  padding: 20px 0 10px 50px;
  background-color: white;
  margin-bottom: 10px;
  border-radius: 10px;
}

.seach-tiaojain {
  padding: 10px 0;
  border-bottom: 1px solid antiquewhite;
}

::v-deep .el-radio {
  margin-right: 20px;
}

@media screen and (max-width: 1000px) {

  .main {
    width: 100%;
  }

  .search-box {
    width: 80%;
  }

  .item-header {
    font-size: 12px;
  }

  .item-ra {
    font-size: 14px;
  }

  .item-createtime {
    font-size: 10px;
  }

  .arr-box {
    display: block;
  }

  .item-left {
    padding-left: 10px !important;
  }
}
</style>
